<template>
  <!-- 产品检测数据表 -->
  <div class="serch_content">
    <div class="serch_top">
      <!-- 产品检测数据表 -->
      <el-form class="table_serch">
        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">机种编码</div>
          <el-autocomplete
            size="mini"
            @input="(e) => (formInline.recipe = validForbid(e))"
            popper-class="my-autocomplete"
            class="product"
            style="margin-left: 5px; width: 135px; margin-top: 8px"
            v-model="formInline.recipe"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </div>

        <!-- 工业 -->
        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">工单编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              @input="(e) => (formInline.order = validForbid(e))"
              class="product"
              popper-class="my-autocomplete"
              style="margin-left: 10px; width: 140px"
              v-model="formInline.order"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">线体编码</div>
          <el-form-item label="">
            <el-autocomplete
              class="product"
              size="mini"
              @input="(e) => (formInline.line = validForbid(e))"
              popper-class="my-autocomplete"
              style="margin-left: 10px; width: 140px"
              v-model="formInline.line"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">站点编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              @input="(e) => (formInline.site = validForbid(e))"
              class="product"
              popper-class="my-autocomplete"
              style="margin-left: 10px; width: 140px"
              v-model="formInline.site"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">班次编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              @input="(e) => (formInline.class = validname(e))"
              popper-class="my-autocomplete"
              style="width: 130px; margin-left: 10px"
              v-model="formInline.class"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">起始日期</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.starttime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 140px; margin-left: 10px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">结束日期</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.endtime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 135px; margin-left: 5px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <!-- 文件上传 -->
        <div style="margin-left: -68%">
          <el-upload
            class="upload-demo"
            ref="upload"
            :limit="limitNum"
            accept=".xlsx"
            action="#"
            :data="this.formInline"
            multiple
            :before-upload="beforeUpload"
            :http-request="uploadFile"
            :on-success="handleImageSuccess"
            :on-preview="handlePreview"
            :on-exceed="handleExceed"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :file-list="formInline.fileList"
            :auto-upload="false"
          >
            <el-button
              size="small"
              style="height: 30px; margin-top: 5px"
              class="el-upload__tip"
              plain
              type="primary"
              >上传产品二维码</el-button
            >
          </el-upload>
        </div>

        <div class="table_serch_labe" style="margin-left: 0%">
          <el-button
            type="mini"
            style="height: 30px; margin-top: 4px"
            @click="getdata"
            >查询</el-button
          >

          <!-- <el-button type="mini" @click="uploadfiles">模拟数据</el-button> -->
        </div>
      </el-form>
    </div>
    <!-- 图表 -->
    <div class="serch_svg">
      <div id="my_svg"></div>
    </div>
    <!-- 第一个表格 -->
    <div class="serve_table">
      <div style="padding: 0px; font-size: 12px">产品缺陷统计</div>
      <el-table
        style="width: 100%; font-size: 12px"
        border
        :data="this.itemslist"
      >
        <el-table-column
          v-for="(item, index) in this.bartable[0]"
          :key="index"
          :label="item"
          :prop="item"
        ></el-table-column>
      </el-table>
    </div>
    <!-- 第二个列表 -->
    <div class="serch_table_two">
      <div style="padding: 10px; font-size: 12px">站点信息统计</div>
      <div class="table_ser">
        <el-table
          :data="this.tablelist"
          size="mini"
          border
          :show-header="true"
          highlight-current-row
          :row-style="{ height: '10px' }"
          style="font-size: 9px"
        >
          <el-table-column
            v-for="(item, index) in this.listdata[0]"
            :key="index"
            :label="item"
            :prop="item"
          >
            <template slot-scope="scope">
              <span v-html="showDate(scope.row[item])"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="tlop">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- <Table_ser></Table_ser> -->
    </div>

    <div class="table_loding" v-show="isshow">
      <div class="table_title">加载中... ....</div>
      <div class="table_timer">网络请求延时: {{ timer }}秒</div>
    </div>

    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
  </div>
</template>
<script>
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";

export default {
  components: { Popup },
  data() {
    return {
      Popup_show: false,
      fileList: [],
      formData: "",
      theme: "上传表格",
      headers: { "Content-Type": "multipart/form-data" },
      isConfirm: true,
      valtimer: "",
      timer: 0,
      isshow: false,
      limitNum: 1,
      formInline: {
        starttime: "",
        endtime: "",
        recipe: "BF066YQM-AK2-B900",
        line: "",
        site: "",
        class: "",
        order: "",
        type: [],
        personid: "",
        filesUrl: "",
        fileList: [],
        filename:''
      },
      restaurants: [],
      barlist: [], //柱状图数组
      bartable: [],
      items: [],
      tableid: [],
      tableData: [],
      tableColumns: [],
      listdata: [],
      search: "NG",
      itemslist: [],
      total: 0,
      currentPage: 1,
      pageSize: 50,
      caChe_key: "",
      tablelist: [],
      PannalID: "",
      q295: "",
      ABI: "",
      AFI: "",
      DOA: "",
      EAC: "",
      MFI: "",
      cont: {
        defect: "",
        OPO: "",
        ABI: "",
        AFI: "",
        DOA: "",
        EAC: "",
        MFI: "",
      },
      titlelist: [],
    };
  },
  mounted() {},
  computed: {
    tables: function () {
      var val = this.search;
      if (val) {
        return this.tablelist.filter((data) => {
          return Object.keys(data).some((key) => {
            return String(data[key]).toLowerCase().indexOf(val) > -1;
          });
        });
      }
      return this.tablelist;
    },
  },
  methods: {
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUpload(file) {
      console.log("2");
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },
    // 文件状态改变
    handleChange(file,fileList) {
        this.formInline.filename = file.name
        this.fileList = fileList.slice(-3);
        this.uploadfiles();
      // if (file) {
      //   setTimeout(() => {
      //     this.$message({
      //       message: "文件上传成功",
      //       type: "success",
      //     });
      //   }, 1000);
      // }
    },

    handleRemove(file, fileList) {
      console.log("3");
      console.log(file, fileList);
      // this.formInline.fileList.shift();
      this.fileList.shift();
      // console.log('=---------',this.fileList)
    },

    handlePreview(file) {
      console.log(file);
      console.log("4");
    },

    handleImageSuccess(res, file, fileList) {
      console.log("6");
      console.log(file);
      console.log(res);
      console.log(fileList);
    },

    uploadFile(file) {
      this.formData.append("file", file.file);
    },

    // 文件超出个数限制
    handleExceed(files, fileList) {
      // console.log(filea)
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },

    //上传接口
    uploadfiles() {
      let files = new FormData();
      files.append("theme", this.theme);
      for (let i = 0; i < this.fileList.length; i++) {
        files.append("files", this.fileList[i].raw);
      }
      this.ajax.post("upload",files,{
      }).then((res)=>{
        console.log(res)
        if(res.status==200){
           this.$message({
            message: "文件上传成功",
            type: "success",
          });
        }
      });
    },

    //计时器
    timerclick() {
      this.valtimer = setInterval(() => {
        this.isshow = true;
        this.timer++;
      }, 1000);
    },

    removetmer() {
      this.isshow = false;
      clearInterval(this.valtimer);
      this.timer = 0;
    },

    //请求方法获取所有数据
    getdata() {
      console.log(this.formInline);
      setTimeout(() => {
        if (this.barlist.length == "") {
          this.Popup_show = true;
          this.Popup_timer = setInterval(() => {
            this.timer++;
          }, 1000);
        } else {
          return;
        }
      },25000);

      if (navigator.onLine) {
        console.log("网络已连接");
        this.removetmer();
      } else {
        console.log("已断网");
        setTimeout(() => {
          this.timerclick();
        }, 3000);
      }
      if (this.formInline.recipe == "") {
        this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime < this.formInline.starttime) {
        this.$alert("结束日期不能小于起始日期", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax
          .get(
            `prod/1001?starttime=${this.formInline.starttime}&endtime=${this.formInline.endtime}&recipe=${this.formInline.recipe}&line=${this.formInline.line}&site=${this.formInline.site}&class=${this.formInline.class}&order=${this.formInline.order}&personid=${this.formInline.personid}&filesUrl=${this.formInline.filesUrl}&fileList=${this.formInline.fileList}&filename=${this.formInline.filename}`,
            {
              cancelToken: new CancelToken((c) => {
                this.cancel = c;
              }),
            }
          )
          .then((res) => {
            if (res.data) {
              this.tablelist = [];
              this.bartable = [];
              this.itemslist = [];
              this.items = [];
              let reusl = res.data;
              // console.log(reusl);
              this.barlist = reusl.barGraph;
              this.bartable = reusl.bartable;
              // console.log(this.bartable)
              this.tableData = reusl.tableInfo.heads;
              this.total = reusl.tableInfo.row_num;
              this.caChe_key = reusl.tableInfo.cache_key;
              // console.log(this.caChe_key)
              setTimeout(() => {
                this.gettablelist();
              }, 3000);

              if (this.barlist) {
                this.mysvg();
              }
              if (this.bartable) {
                this.intasteron();
              }
            } else if (res.data.code == 204) {
              this.$alert(res.data.message, "消息提示", {
                confirmButtonText: "确定",
                callback: (action) => {
                  this.$message({
                    type: "info",
                    message: `action: ${action}`,
                  });
                },
              });
            }
          });
      }
    },

    //超时弹窗显示状态
    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },

    //关闭请求方法
    cancelget() {
      console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },

    ///分页接口
    gettablelist() {
      var url = `rtable/rk?page=${this.currentPage}&cpp=${this.pageSize}`;
      var besurl = url.replace("rk", this.caChe_key);
      // console.log(besurl);
      this.ajax({
        url: besurl,
        method: "GET",
      }).then((res) => {
        // if (this.currentPage == 1) {
        //   }
        res.data.unshift(this.tableData);
        this.listdata = res.data;
        this.Tabudataparsing();
        // console.log('------------------------',this.listdata);
      });
    },

    //产品履历第二个表格数据解析方法
    intasteron() {
      this.titlelist = this.bartable[0];
      var a = this.titlelist[0];
      var b = this.titlelist[1];
      var c = this.titlelist[2];
      var d = this.titlelist[3];
      var e = this.titlelist[4];
      var f = this.titlelist[6];
      var g = this.titlelist[7];
      var h = this.titlelist[8];
      var io = this.titlelist[9];
      var j = this.titlelist[10];
     if(this.bartable[0].length == 2){ 
        for (let i = 1; i < this.bartable.length; i++) {
          var objon = {};
          objon[a] = this.bartable[i][0];
          objon[b] = this.bartable[i][1];
          this.itemslist.push(objon);
        }
     }else if (this.bartable[0].length == 3) {
        for (let i = 1; i < this.bartable.length; i++) {
          var obj0 = {};
          obj0[a] = this.bartable[i][0];
          obj0[b] = this.bartable[i][1];
          obj0[c] = this.bartable[i][2];
          // obj[d] = this.bartable[i][3];
          this.itemslist.push(obj0);
        }
      } else if (this.bartable[0].length == 4) {
        for (let i = 1; i < this.bartable.length; i++) {
          var obj = {};
          obj[a] = this.bartable[i][0];
          obj[b] = this.bartable[i][1];
          obj[c] = this.bartable[i][2];
          obj[d] = this.bartable[i][3];
          this.itemslist.push(obj);
        }
      } else if (this.bartable[0].length == 5) {
        for (let i = 1; i < this.bartable.length; i++) {
          var obj1 = {};
          obj1[a] = this.bartable[i][0];
          obj1[b] = this.bartable[i][1];
          obj1[c] = this.bartable[i][2];
          obj1[d] = this.bartable[i][3];
          obj1[e] = this.bartable[i][4];
          this.itemslist.push(obj1);
        }
      } else if (this.bartable[0].length == 6) {
        for (let i = 1; i < this.bartable.length; i++) {
          var obj2 = {};
          obj2[a] = this.bartable[i][0];
          obj2[b] = this.bartable[i][1];
          obj2[c] = this.bartable[i][2];
          obj2[d] = this.bartable[i][3];
          obj2[e] = this.bartable[i][4];
          obj2[f] = this.bartable[i][5];
          this.itemslist.push(obj2);
        }
      } else if (this.bartable[0].length == 7) {
        for (let i = 0; i < this.bartable.length; i++) {
          var obj3 = {};
          obj3[a] = this.bartable[i][0];
          obj3[b] = this.bartable[i][1];
          obj3[c] = this.bartable[i][2];
          obj3[d] = this.bartable[i][3];
          obj3[e] = this.bartable[i][4];
          obj3[f] = this.bartable[i][5];
          obj3[g] = this.bartable[i][6];
          this.itemslist.push(obj3);
        }
      } else if (this.bartable[0].length == 8) {
        for (let i = 0; i < this.bartable.length; i++) {
          var obj4 = {};
          obj4[a] = this.bartable[i][0];
          obj4[b] = this.bartable[i][1];
          obj4[c] = this.bartable[i][2];
          obj4[d] = this.bartable[i][3];
          obj4[e] = this.bartable[i][4];
          obj4[f] = this.bartable[i][5];
          obj4[g] = this.bartable[i][6];
          obj4[h] = this.bartable[i][7];
          this.itemslist.push(obj4);
        }
      } else if (this.bartable[0].length == 9) {
        for (let i = 0; i < this.bartable.length; i++) {
          var obj5 = {};
          obj5[a] = this.bartable[i][0];
          obj5[b] = this.bartable[i][1];
          obj5[c] = this.bartable[i][2];
          obj5[d] = this.bartable[i][3];
          obj5[e] = this.bartable[i][4];
          obj5[f] = this.bartable[i][5];
          obj5[g] = this.bartable[i][6];
          obj5[h] = this.bartable[i][7];
          obj5[io] = this.bartable[i][8];
          this.itemslist.push(obj5);
        }
      } else if (this.bartable[0].length == 10) {
        for (let i = 0; i < this.bartable.length; i++) {
          var obj6 = {};
          obj6[a] = this.bartable[i][0];
          obj6[b] = this.bartable[i][1];
          obj6[c] = this.bartable[i][2];
          obj6[d] = this.bartable[i][3];
          obj6[e] = this.bartable[i][4];
          obj6[f] = this.bartable[i][5];
          obj6[g] = this.bartable[i][6];
          obj6[h] = this.bartable[i][7];
          obj6[io] = this.bartable[i][8];
          obj6[j] = this.bartable[i][9];
          this.itemslist.push(obj6);
        }
      }
      // console.log(this.itemslist);
    },

     //分页数据列表解析方法
    Tabudataparsing() {
      this.tablelist = [];
      // console.log("------------------------", this.listdata);
      var titlelist = this.listdata[0];
      var a = titlelist[0];
      var b = titlelist[1];
      var c = titlelist[2];
      var d = titlelist[3];
      var e = titlelist[4];
      var f = titlelist[6];
      var g = titlelist[7];
      var h = titlelist[8];
      var io = titlelist[9];
      var j = titlelist[10];
      var k = titlelist[11];
      var L = titlelist[12];
      var m = titlelist[13];
      var n = titlelist[14];
      var o = titlelist[15];
      var p = titlelist[16];
      var q = titlelist[17];
      var r = titlelist[18];
      var s = titlelist[19];
      var t = titlelist[20];
      var u = titlelist[21];
      var v = titlelist[21];
      var w = titlelist[21];
      var x = titlelist[21];
      var y = titlelist[21];
      var z = titlelist[21];
      if (this.listdata[0].length == 2) {
        for (let i = 1; i < this.listdata.length; i++) {
          var objon = {};
          objon[a] = this.listdata[i][0];
          objon[b] = this.listdata[i][1];
          this.tablelist.push(objon);
        }
      } else if (this.listdata[0].length == 3) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj0 = {};
          obj0[a] = this.listdata[i][0];
          obj0[b] = this.listdata[i][1];
          obj0[c] = this.listdata[i][2];
          // obj[d] = this.bartable[i][3];
          this.tablelist.push(obj0);
        }
      } else if (this.listdata[0].length == 4) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj = {};
          obj[a] = this.listdata[i][0];
          obj[b] = this.listdata[i][1];
          obj[c] = this.listdata[i][2];
          obj[d] = this.listdata[i][3];
          this.tablelist.push(obj);
        }
      } else if (this.listdata[0].length == 5) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj1 = {};
          obj1[a] = this.listdata[i][0];
          obj1[b] = this.listdata[i][1];
          obj1[c] = this.listdata[i][2];
          obj1[d] = this.listdata[i][3];
          obj1[e] = this.listdata[i][4];
          this.tablelist.push(obj1);
        }
      } else if (this.listdata[0].length == 6) {
        for (let i = 1; i < this.listdata.length; i++) {
          var obj2 = {};
          obj2[a] = this.listdata[i][0];
          obj2[b] = this.listdata[i][1];
          obj2[c] = this.listdata[i][2];
          obj2[d] = this.listdata[i][3];
          obj2[e] = this.listdata[i][4];
          obj2[f] = this.listdata[i][5];
          this.tablelist.push(obj2);
        }
      } else if (this.listdata[0].length == 7) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj3 = {};
          obj3[a] = this.listdata[i][0];
          obj3[b] = this.listdata[i][1];
          obj3[c] = this.listdata[i][2];
          obj3[d] = this.listdata[i][3];
          obj3[e] = this.listdata[i][4];
          obj3[f] = this.listdata[i][5];
          obj3[g] = this.listdata[i][6];
          this.tablelist.push(obj3);
        }
      } else if (this.listdata[0].length == 8) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj4 = {};
          obj4[a] = this.listdata[i][0];
          obj4[b] = this.listdata[i][1];
          obj4[c] = this.listdata[i][2];
          obj4[d] = this.listdata[i][3];
          obj4[e] = this.listdata[i][4];
          obj4[f] = this.listdata[i][5];
          obj4[g] = this.listdata[i][6];
          obj4[h] = this.listdata[i][7];
          this.tablelist.push(obj4);
        }
      } else if (this.listdata[0].length == 9) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj5 = {};
          obj5[a] = this.listdata[i][0];
          obj5[b] = this.listdata[i][1];
          obj5[c] = this.listdata[i][2];
          obj5[d] = this.listdata[i][3];
          obj5[e] = this.listdata[i][4];
          obj5[f] = this.listdata[i][5];
          obj5[g] = this.listdata[i][6];
          obj5[h] = this.listdata[i][7];
          obj5[io] = this.listdata[i][8];
          this.tablelist.push(obj5);
        }
      } else if (this.listdata[0].length == 10) {
        for (let i = 0; i < this.listdata.length; i++) {
          var obj6 = {};
          obj6[a] = this.listdata[i][0];
          obj6[b] = this.listdata[i][1];
          obj6[c] = this.listdata[i][2];
          obj6[d] = this.listdata[i][3];
          obj6[e] = this.listdata[i][4];
          obj6[f] = this.listdata[i][5];
          obj6[g] = this.listdata[i][6];
          obj6[h] = this.listdata[i][7];
          obj6[io] = this.listdata[i][8];
          obj6[j] = this.listdata[i][9];
          this.tablelist.push(obj6);
        }
      }else if(this.listdata[0].length == 11){
        for(let i=0; i <this.listdata.length;i++){
          var obj7 ={};
          obj7[a] = this.listdata[i][0];
          obj7[b] = this.listdata[i][1];
          obj7[c] = this.listdata[i][2];
          obj7[d] = this.listdata[i][3];
          obj7[e] = this.listdata[i][4];
          obj7[f] = this.listdata[i][5];
          obj7[g] = this.listdata[i][6];
          obj7[h] = this.listdata[i][7];
          obj7[io] = this.listdata[i][8];
          obj7[j] = this.listdata[i][9];
          obj7[k] = this.listdata[i][10];
          this.tablelist.push(obj7);
        }
      }else if(this.listdata[0].length == 12){
         for(let i=0; i <this.listdata.length;i++){
          var obj8 ={};
          obj8[a] = this.listdata[i][0];
          obj8[b] = this.listdata[i][1];
          obj8[c] = this.listdata[i][2];
          obj8[d] = this.listdata[i][3];
          obj8[e] = this.listdata[i][4];
          obj8[f] = this.listdata[i][5];
          obj8[g] = this.listdata[i][6];
          obj8[h] = this.listdata[i][7];
          obj8[io] = this.listdata[i][8];
          obj8[j] = this.listdata[i][9];
          obj8[k] = this.listdata[i][10];
          obj8[L] = this.listdata[i][11];
          this.tablelist.push(obj8);
        }
      }else if(this.listdata[0].length == 13){
        for(let i=0; i <this.listdata.length;i++){
          var obj9 ={};
          obj9[a] = this.listdata[i][0];
          obj9[b] = this.listdata[i][1];
          obj9[c] = this.listdata[i][2];
          obj9[d] = this.listdata[i][3];
          obj9[e] = this.listdata[i][4];
          obj9[f] = this.listdata[i][5];
          obj9[g] = this.listdata[i][6];
          obj9[h] = this.listdata[i][7];
          obj9[io] = this.listdata[i][8];
          obj9[j] = this.listdata[i][9];
          obj9[k] = this.listdata[i][10];
          obj9[L] = this.listdata[i][11];
          obj9[m] = this.listdata[i][12];
          this.tablelist.push(obj9);
        }
      }else if(this.listdata[0].length == 14){
        for(let i=0; i <this.listdata.length;i++){
          var obj10 ={};
          obj10[a] = this.listdata[i][0];
          obj10[b] = this.listdata[i][1];
          obj10[c] = this.listdata[i][2];
          obj10[d] = this.listdata[i][3];
          obj10[e] = this.listdata[i][4];
          obj10[f] = this.listdata[i][5];
          obj10[g] = this.listdata[i][6];
          obj10[h] = this.listdata[i][7];
          obj10[io] = this.listdata[i][8];
          obj10[j] = this.listdata[i][9];
          obj10[k] = this.listdata[i][10];
          obj10[L] = this.listdata[i][11];
          obj10[m] = this.listdata[i][12];
          obj10[n] = this.listdata[i][13];
          this.tablelist.push(obj10);
        }
      }else if(this.listdata[0].length == 15){
         for(let i=0; i <this.listdata.length;i++){
          var obj11 ={};
          obj11[a] = this.listdata[i][0];
          obj11[b] = this.listdata[i][1];
          obj11[c] = this.listdata[i][2];
          obj11[d] = this.listdata[i][3];
          obj11[e] = this.listdata[i][4];
          obj11[f] = this.listdata[i][5];
          obj11[g] = this.listdata[i][6];
          obj11[h] = this.listdata[i][7];
          obj11[io] = this.listdata[i][8];
          obj11[j] = this.listdata[i][9];
          obj11[k] = this.listdata[i][10];
          obj11[L] = this.listdata[i][11];
          obj11[m] = this.listdata[i][12];
          obj11[n] = this.listdata[i][13];
          obj11[o] = this.listdata[i][14];
          this.tablelist.push(obj11);
        }

      }else if(this.listdata[0].length == 16){
          for(let i=0; i <this.listdata.length;i++){
          var obj12 ={};
          obj12[a] = this.listdata[i][0];
          obj12[b] = this.listdata[i][1];
          obj12[c] = this.listdata[i][2];
          obj12[d] = this.listdata[i][3];
          obj12[e] = this.listdata[i][4];
          obj12[f] = this.listdata[i][5];
          obj12[g] = this.listdata[i][6];
          obj12[h] = this.listdata[i][7];
          obj12[io] = this.listdata[i][8];
          obj12[j] = this.listdata[i][9];
          obj12[k] = this.listdata[i][10];
          obj12[L] = this.listdata[i][11];
          obj12[m] = this.listdata[i][12];
          obj12[n] = this.listdata[i][13];
          obj12[o] = this.listdata[i][14];
          obj12[p] = this.listdata[i][15];
          this.tablelist.push(obj12);
         }
      }else if(this.listdata[0].length == 17){
         for(let i=0; i <this.listdata.length;i++){
          var obj13 ={};
          obj13[a] = this.listdata[i][0];
          obj13[b] = this.listdata[i][1];
          obj13[c] = this.listdata[i][2];
          obj13[d] = this.listdata[i][3];
          obj13[e] = this.listdata[i][4];
          obj13[f] = this.listdata[i][5];
          obj13[g] = this.listdata[i][6];
          obj13[h] = this.listdata[i][7];
          obj13[io] = this.listdata[i][8];
          obj13[j] = this.listdata[i][9];
          obj13[k] = this.listdata[i][10];
          obj13[L] = this.listdata[i][11];
          obj13[m] = this.listdata[i][12];
          obj13[n] = this.listdata[i][13];
          obj13[o] = this.listdata[i][14];
          obj13[p] = this.listdata[i][15];
          obj13[q] = this.listdata[i][16];
          this.tablelist.push(obj13);
         }

      }else if(this.listdata[0].length == 18){
         for(let i=0; i <this.listdata.length;i++){
          var obj14 ={};
          obj14[a] = this.listdata[i][0];
          obj14[b] = this.listdata[i][1];
          obj14[c] = this.listdata[i][2];
          obj14[d] = this.listdata[i][3];
          obj14[e] = this.listdata[i][4];
          obj14[f] = this.listdata[i][5];
          obj14[g] = this.listdata[i][6];
          obj14[h] = this.listdata[i][7];
          obj14[io] = this.listdata[i][8];
          obj14[j] = this.listdata[i][9];
          obj14[k] = this.listdata[i][10];
          obj14[L] = this.listdata[i][11];
          obj14[m] = this.listdata[i][12];
          obj14[n] = this.listdata[i][13];
          obj14[o] = this.listdata[i][14];
          obj14[p] = this.listdata[i][15];
          obj14[q] = this.listdata[i][16];
          obj14[r] = this.listdata[i][17];
          this.tablelist.push(obj14);
         }
      }else if(this.listdata[0].length == 19){
        for(let i=0; i <this.listdata.length;i++){
          var obj15 ={};
          obj15[a] = this.listdata[i][0];
          obj15[b] = this.listdata[i][1];
          obj15[c] = this.listdata[i][2];
          obj15[d] = this.listdata[i][3];
          obj15[e] = this.listdata[i][4];
          obj15[f] = this.listdata[i][5];
          obj15[g] = this.listdata[i][6];
          obj15[h] = this.listdata[i][7];
          obj15[io] = this.listdata[i][8];
          obj15[j] = this.listdata[i][9];
          obj15[k] = this.listdata[i][10];
          obj15[L] = this.listdata[i][11];
          obj15[m] = this.listdata[i][12];
          obj15[n] = this.listdata[i][13];
          obj15[o] = this.listdata[i][14];
          obj15[p] = this.listdata[i][15];
          obj15[q] = this.listdata[i][16];
          obj15[r] = this.listdata[i][17];
          obj15[s] = this.listdata[i][18];
          this.tablelist.push(obj15);
         }
      }else if(this.listdata[0].length == 20){
         for(let i=0; i <this.listdata.length;i++){
          var obj16 ={};
          obj16[a] = this.listdata[i][0];
          obj16[b] = this.listdata[i][1];
          obj16[c] = this.listdata[i][2];
          obj16[d] = this.listdata[i][3];
          obj16[e] = this.listdata[i][4];
          obj16[f] = this.listdata[i][5];
          obj16[g] = this.listdata[i][6];
          obj16[h] = this.listdata[i][7];
          obj16[io] = this.listdata[i][8];
          obj16[j] = this.listdata[i][9];
          obj16[k] = this.listdata[i][10];
          obj16[L] = this.listdata[i][11];
          obj16[m] = this.listdata[i][12];
          obj16[n] = this.listdata[i][13];
          obj16[o] = this.listdata[i][14];
          obj16[p] = this.listdata[i][15];
          obj16[q] = this.listdata[i][16];
          obj16[r] = this.listdata[i][17];
          obj16[s] = this.listdata[i][18];
          obj16[t] = this.listdata[i][19];
          this.tablelist.push(obj16);
         }
      }else if(this.listdata[0].length == 21){
          for(let i=0; i <this.listdata.length;i++){
          var obj17 ={};
          obj17[a] = this.listdata[i][0];
          obj17[b] = this.listdata[i][1];
          obj17[c] = this.listdata[i][2];
          obj17[d] = this.listdata[i][3];
          obj17[e] = this.listdata[i][4];
          obj17[f] = this.listdata[i][5];
          obj17[g] = this.listdata[i][6];
          obj17[h] = this.listdata[i][7];
          obj17[io] = this.listdata[i][8];
          obj17[j] = this.listdata[i][9];
          obj17[k] = this.listdata[i][10];
          obj17[L] = this.listdata[i][11];
          obj17[m] = this.listdata[i][12];
          obj17[n] = this.listdata[i][13];
          obj17[o] = this.listdata[i][14];
          obj17[p] = this.listdata[i][15];
          obj17[q] = this.listdata[i][16];
          obj17[r] = this.listdata[i][17];
          obj17[s] = this.listdata[i][18];
          obj17[t] = this.listdata[i][19];
          obj17[u] = this.listdata[i][20];
          this.tablelist.push(obj17);
         }
      }else if(this.listdata[0].length == 22){
         for(let i=0; i <this.listdata.length;i++){
          var obj18 ={};
          obj18[a] = this.listdata[i][0];
          obj18[b] = this.listdata[i][1];
          obj18[c] = this.listdata[i][2];
          obj18[d] = this.listdata[i][3];
          obj18[e] = this.listdata[i][4];
          obj18[f] = this.listdata[i][5];
          obj18[g] = this.listdata[i][6];
          obj18[h] = this.listdata[i][7];
          obj18[io] = this.listdata[i][8];
          obj18[j] = this.listdata[i][9];
          obj18[k] = this.listdata[i][10];
          obj18[L] = this.listdata[i][11];
          obj18[m] = this.listdata[i][12];
          obj18[n] = this.listdata[i][13];
          obj18[o] = this.listdata[i][14];
          obj18[p] = this.listdata[i][15];
          obj18[q] = this.listdata[i][16];
          obj18[r] = this.listdata[i][17];
          obj18[s] = this.listdata[i][18];
          obj18[t] = this.listdata[i][19];
          obj18[u] = this.listdata[i][20];
          obj18[v] = this.listdata[i][21];
          this.tablelist.push(obj18);
         }
      }else if(this.listdata[0].length == 23){
        for(let i=0; i <this.listdata.length;i++){
          var obj19 ={};
          obj19[a] = this.listdata[i][0];
          obj19[b] = this.listdata[i][1];
          obj19[c] = this.listdata[i][2];
          obj19[d] = this.listdata[i][3];
          obj19[e] = this.listdata[i][4];
          obj19[f] = this.listdata[i][5];
          obj19[g] = this.listdata[i][6];
          obj19[h] = this.listdata[i][7];
          obj19[io] = this.listdata[i][8];
          obj19[j] = this.listdata[i][9];
          obj19[k] = this.listdata[i][10];
          obj19[L] = this.listdata[i][11];
          obj19[m] = this.listdata[i][12];
          obj19[n] = this.listdata[i][13];
          obj19[o] = this.listdata[i][14];
          obj19[p] = this.listdata[i][15];
          obj19[q] = this.listdata[i][16];
          obj19[r] = this.listdata[i][17];
          obj19[s] = this.listdata[i][18];
          obj19[t] = this.listdata[i][19];
          obj19[u] = this.listdata[i][20];
          obj19[v] = this.listdata[i][21];
          obj19[w] = this.listdata[i][22];
          this.tablelist.push(obj19);
         }
      }else if(this.listdata[0].length == 24){
          for(let i=0; i <this.listdata.length;i++){
          var obj20 ={};
          obj20[a] = this.listdata[i][0];
          obj20[b] = this.listdata[i][1];
          obj20[c] = this.listdata[i][2];
          obj20[d] = this.listdata[i][3];
          obj20[e] = this.listdata[i][4];
          obj20[f] = this.listdata[i][5];
          obj20[g] = this.listdata[i][6];
          obj20[h] = this.listdata[i][7];
          obj20[io] = this.listdata[i][8];
          obj20[j] = this.listdata[i][9];
          obj20[k] = this.listdata[i][10];
          obj20[L] = this.listdata[i][11];
          obj20[m] = this.listdata[i][12];
          obj20[n] = this.listdata[i][13];
          obj20[o] = this.listdata[i][14];
          obj20[p] = this.listdata[i][15];
          obj20[q] = this.listdata[i][16];
          obj20[r] = this.listdata[i][17];
          obj20[s] = this.listdata[i][18];
          obj20[t] = this.listdata[i][19];
          obj20[u] = this.listdata[i][20];
          obj20[v] = this.listdata[i][21];
          obj20[w] = this.listdata[i][22];
          obj20[x] = this.listdata[i][23];
          this.tablelist.push(obj20);
         }
      }else if(this.listdata[0].length == 25){
        for(let i=0; i <this.listdata.length;i++){
          var obj21 ={};
          obj21[a] = this.listdata[i][0];
          obj21[b] = this.listdata[i][1];
          obj21[c] = this.listdata[i][2];
          obj21[d] = this.listdata[i][3];
          obj21[e] = this.listdata[i][4];
          obj21[f] = this.listdata[i][5];
          obj21[g] = this.listdata[i][6];
          obj21[h] = this.listdata[i][7];
          obj21[io] = this.listdata[i][8];
          obj21[j] = this.listdata[i][9];
          obj21[k] = this.listdata[i][10];
          obj21[L] = this.listdata[i][11];
          obj21[m] = this.listdata[i][12];
          obj21[n] = this.listdata[i][13];
          obj21[o] = this.listdata[i][14];
          obj21[p] = this.listdata[i][15];
          obj21[q] = this.listdata[i][16];
          obj21[r] = this.listdata[i][17];
          obj21[s] = this.listdata[i][18];
          obj21[t] = this.listdata[i][19];
          obj21[u] = this.listdata[i][20];
          obj21[v] = this.listdata[i][21];
          obj21[w] = this.listdata[i][22];
          obj21[x] = this.listdata[i][23];
          obj21[y] = this.listdata[i][24];
          this.tablelist.push(obj21);
         }

      }else if(this.listdata[0].length == 26){
        for(let i=0; i <this.listdata.length;i++){
          var obj22 ={};
          obj22[a] = this.listdata[i][0];
          obj22[b] = this.listdata[i][1];
          obj22[c] = this.listdata[i][2];
          obj22[d] = this.listdata[i][3];
          obj22[e] = this.listdata[i][4];
          obj22[f] = this.listdata[i][5];
          obj22[g] = this.listdata[i][6];
          obj22[h] = this.listdata[i][7];
          obj22[io] = this.listdata[i][8];
          obj22[j] = this.listdata[i][9];
          obj22[k] = this.listdata[i][10];
          obj22[L] = this.listdata[i][11];
          obj22[m] = this.listdata[i][12];
          obj22[n] = this.listdata[i][13];
          obj22[o] = this.listdata[i][14];
          obj22[p] = this.listdata[i][15];
          obj22[q] = this.listdata[i][16];
          obj22[r] = this.listdata[i][17];
          obj22[s] = this.listdata[i][18];
          obj22[t] = this.listdata[i][19];
          obj22[u] = this.listdata[i][20];
          obj22[v] = this.listdata[i][21];
          obj22[w] = this.listdata[i][22];
          obj22[x] = this.listdata[i][23];
          obj22[y] = this.listdata[i][24];
          obj22[z] = this.listdata[i][25];
          this.tablelist.push(obj22);
         }
      }
    },


    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      // this.getprodePage();
      this.gettablelist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      // this.getprodePage();
      this.gettablelist();
    },

    //柱状图
    mysvg() {
      // console.log("获取柱状图数据q111111111111", this.barlist);
      let dataname = [];
      let datalist = [];
      let titlename = [];
      let list = [];

      console.log("---------返回原始数据", this.barlist);
      for (let i = 0; i < this.barlist.length; i++) {
        dataname.push(this.barlist[i].deviceID);
        datalist = this.barlist[i].data;
      }

      for (let i = 0; i < datalist.length; i++) {
        titlename.push(datalist[i].defect);
      }

      this.barlist.forEach((ele) => {
        list.push({
          name: ele.deviceID,
          data: ele.data.map((item) => {
            return item.val;
          }),
          type: "bar",
          stack: "a",
          barWidth: 0,
          // barCateGoryGap: "30%",
          label: {
            position: "insideRight",
            normal: {
              show: false, //是否显示
              formatter: "{a}{b}:{c}%",
            },
          },
        });
      });
      console.log("----------------柱状图数据", list);

      let mysvg = this.$echarts.init(document.getElementById("my_svg"));
      mysvg.setOption({
        option: true,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: dataname,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: 220,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: titlename,
        },
        yAxis: {
          type: "value",
        },
        series: list,
      });
    },

    loadAll() {
      // return [{ value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },

    // 筛选变色
    showDate(val) {
      val = val + "";
      if (val.indexOf(this.search) !== -1 && this.search !== "") {
        return val.replace(
          this.search,
          '<font color="#FF0000">' + this.search + "</font>"
        );
      } else {
        return val;
      }
    },
  },
};
</script>

<style  scoped>
.serch_content {
  width: 100%;
  position: relative;
}
.serch_top {
  width: 100%;
  /* border:1px solid #000; */
  background: #ffffff;
  box-shadow: 0px 0px 0px 2px gainsboro;
}
.serch_svg {
  width: 100%;
  min-width: 900px;
  /* bordeR:1px solid red; */
  margin-top: 10px;
  background: #ffffff;
}
.serve_table {
  width: 100%;
  min-width: 900px;
  /* border:1px solid #000; */
  margin-top: 10px;
  height: 300px;
  background: #ffffff;
  overflow-x: auto;
}
.serch_table_two {
  width: 100%;
  min-width: 900px;
  background: #ffffff;
  margin-top: 10px;
}
.table_ser {
  width: 100%;
  min-width: 900px;
  /* border: 1px solid #000; */
  overflow: auto;
}
.tlop {
  width: 30%;
}

.table_serch {
  width: 100%;
  min-width: 900px;
  padding-top: 8px;
  /* border: 1px solid red; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}
.el-select {
  height: 10px;
  margin-left: -6px;
}
.product {
  width: 120px;
}

#my_svg {
  width: 99%;
  height: 300px;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 15%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}
</style>